<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		body {
			font-size: 14px;
			font-family: "Lantinghei SC Extralight",Arial;
		}
		ul {
			padding: 0;
			margin: 0;
			list-style: none;
		}
		a {
			text-decoration: none;
		}
		img {
			vertical-align: top;
		}
		#wrap {
			width: 760px;
			height: 260px;
			margin: 100px auto;
			padding: 145px 120px 95px;
			background: url(img/bg.jpg) no-repeat 0 0;
		}
		#section {
			width: 760px;
			height: 260px;
			-moz-box-shadow: 0px 0px 4px rgba(0,0,0,.2); 
			box-shadow: 0px 0px 4px rgba(0,0,0,.2);
		}
		#choose {
			width: 760px;
			height: 50px;
			margin: 0 auto;
			background: url(img/nav_bg.png) no-repeat 0 0;
			line-height: 50px;
			text-indent: 21px;
		}
		#type {
			width: 100%;
			height: 210px;
			background: url(img/type_bg.png) no-repeat 0 0;
			padding: 17px 0 16px 28px;
		}
		#type li {
			height: 44px;
			color: #8a8a8a;
			line-height: 44px;
		}
		#type a {
			margin: 0 12px 0 11px;
			color: #000;
		}
		#choose mark {
			position: relative;
			display: inline-block;
			height: 24px;
			line-height: 24px;
			border: 1px solid #28a5c4;
			color: #28a5c4;
			margin: 12px 5px 0;
			background: none;
			padding: 0 30px 0 6px;
			text-indent: 0;
		}
		#choose mark a {
			position: absolute;
			top: 3px;
			right: 2px;
			display: inline-block;
			width: 18px;
			height: 18px;
			background: #28a5c4;
			color: #fff;
			line-height: 18px;
			font-size: 16px;
			text-align: center;
		}
		.active {
			background: rgb(40, 165, 196);
		}
	</style>
	<script src="../src/vue.js"></script>
	<script type="text/javascript">
		let data = [
			{
				title: '品牌',
				list: ["苹果", "小米", "锤子", "魅族", "华为", "三星", "OPPO", "vivo", "乐视", "360", "中兴", "索尼"]
			},
			{
				title: '尺寸',
				list: ["3.0英寸以下", "3.0-3.9英寸", "4.0-4.5英寸", "4.6-4.9英寸", "5.0-5.5英寸", "6.0英寸以上"]
			},
			{
				title: '系统',
				list: ["安卓", "(", "Android", ")", "苹果", "(", "IOS", ")", "微软", "(", "WindowsPhone", ")", "无", "其他"]
			},
			{
				title: '网络',
				list: ["联通3G", "双卡单4G", "双卡双4G", "联通4G", "电信4G", "移动4G"]
			}
		]
	</script>
</head>
<body>
	<div id="wrap">
		<section id="section">
			<nav id="choose">
			你的选择:
			<mark v-for="item in choose">{{item}}<a href="javascript:;">x</a></mark>
			</nav>
			<ul id="type">
				<li v-for="item in list">
					{{item.title}}：
					<a 
						@click="chooseHandle(item,i,option)"
						v-for="option,i in item.list" 
						href="javascript:;"
						:class="{active: item.index === i}" 
					>
						{{option}}
					</a>
				</li>
			</ul>
		</section>
	</div>
	<script type="text/javascript">
		// 在循环的对象绑定一个属性index，记录选中的a
		new Vue({
			el:'#wrap',
			data:{
				list:data,
				index: -1,
				choose: {} // {0:value,1:value,2:value}
			},
			methods: {
				chooseHandle (item,i,option) {
					console.log(item,i);
					//item.index = i;  // 不能响应
					this.$set(item,'index',i)
					this.choose.push(option)
				}
			}
		})
	</script>
</body>
</html>